/*
  月报
 */
<template>
  <yd-layout>
    <!-- <yd-navbar slot="navbar" title="月报" bgcolor="#0a0a0a" color="#fff">
      <router-link to="/beautician/user" slot="left">
        <yd-navbar-back-icon color="#fff"></yd-navbar-back-icon>
      </router-link>
    </yd-navbar> -->
    <div style="padding:10px 5px;background:#fff;">
      <table class="list-table" border="0" cellspacing="0" cellpadding="0">
        <thead>
          <tr>
            <th>时间</th>
            <th>项目名称</th>
            <th>客户</th>
            <th>折扣</th>
            <th>消耗</th>
            <th>提点</th>
            <th>提成</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, i) in data.infos" :key="i">
            <td v-if="item.rowSpan" :rowSpan="item.rowSpan">
              {{getFormatDateStr(item.payTime * 1000)}}
            </td>
            <td>
              {{item.pname}}
            </td>
            <td>
              {{item.name}}
            </td>
            <td>
              {{item.discount}}折
            </td>
            <td>
              {{item.consume/100}}
            </td>
            <td>
              {{item.proportion}}%
            </td>
            <td>
              {{item.commission/100}}
            </td>
          </tr>
        </tbody>
      </table>
      <div style="padding:10px;background-color:#fff;">
        <div>
          累计销售额：￥{{totalAmountStr}}
          累计提成：￥{{totalCommissionStr}}
        </div>
      </div>
    </div>

  </yd-layout>
</template>

<script>
import pageMixin from "../../../mixins/page";
import HomeTabbar from "./home-tabbar";
import DailyItem from "./Daily/daily-info-item";

export default {
  mixins: [pageMixin],
  components: {
    HomeTabbar,
    DailyItem,
  },
  data() {
    return {
      data: {
        totalAmount: null,
        totalCommission: null,
        infos: [],
      },
      rids: [],
    };
  },
  computed: {
    totalAmountStr() {
      if (this.data.totalAmount == null) {
        return "--";
      } else {
        return Number(this.data.totalAmount / 100).toFixed(2);
      }
    },
    totalCommissionStr() {
      if (this.data.totalCommission == null) {
        return "--";
      } else {
        return Number(this.data.totalCommission / 100).toFixed(2);
      }
    },
    uid() {
      return this.$store.state.uid;
    },
  },
  methods: {
    async handleRefresh() {
      await this.loadData();
      this.$refs["pullrefresh"].$emit("ydui.pullrefresh.finishLoad");
    },
    handleSubmitReport() {
      let rids = this.rids;
      if (rids.length === 0) {
        this.$dialog.toast({
          mes: "请选择",
          timeout: 1000,
        });
        return;
      }
      this.$dialog.confirm({
        title: "提示",
        mes: "是否确认上报？",
        opts: async () => {
          this.indicator = true;
          await this.upReport(rids).catch(err => {});
          await this.loadData();
          this.indicator = false;
        },
      });
    },
    async loadData() {
      return new Promise(async (resolve, reject) => {
        let res = await this.$api.monthReports({ fid: this.uid }).catch(err => {
          reject(err);
        });

        this.reset();

        if (res) {
          this.data.totalAmount = res.totalAmount;
          this.data.totalCommission = res.totalCommission;
          // 合并列
          let lastVal = "";
          let val = "";
          let pos = 1;
          this.data.infos = res.infos.map((item, i, arr) => {
            val = new Date(item.payTime * 1000).$formatStr("yyyy-MM-dd");
            item.rowSpan = 1;
            if (lastVal === val) {
              arr[i - pos].rowSpan = arr[i - pos].rowSpan + 1;
              item.rowSpan = null;
              pos++;
            } else {
              item.rowSpan = 1;
              lastVal = val;
              pos = 1;
            }
            return item;
          });
          _log(this.data.infos);
          resolve("success");
        } else {
          reject();
        }
      });
    },
    async upReport(rids) {
      return new Promise(async (resolve, reject) => {
        let res = await this.$api.upReport({ rids }).catch(err => {
          reject(err);
        });

        if (res) {
          if (res.result) {
            resolve(res.message);
            this.$dialog.toast({
              mes: res.message,
              icon: "success",
            });
          } else {
            reject(res.message);
            this.$dialog.toast({
              mes: res.message,
              icon: "error",
            });
          }
        } else {
          reject();
        }
      });
    },
    getFormatDateStr(timestamp) {
      return new Date(timestamp).$formatStr("yyyy-MM-dd");
    },
    reset() {
      this.data.totalAmount = null;
      this.data.totalCommission = null;
      this.data.infos = [];
      this.rids = [];
    },
    async init() {
      this.indicator = true;
      await this.loadData();
      this.indicator = false;
    },
  },
  created() {
    this.init();
  },
};
</script>

<style scoped>
.b-info {
  background-color: #fff;
  padding: 10px;
  font-size: 12px;
  color: #333;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
}
</style>
